.index {
	display: flex;
	flex-direction: column;
	//主体
	.index-main {
		// height: 100px;
		flex-grow: 1;
		overflow-y: auto;

		section {
			margin: 10px;
		}
		.first-row {
			display: flex;
			justify-content: space-around;
			height: 120px;
			.ranking {
				position: relative;
				width: 1px;
				flex-grow: 2;
				border-radius: 20px;
				padding: 10px;
				margin-right: 15px;
				background: url(../../assets/images/index-card-rank.png) no-repeat;
				background-size: 50%;
				background-position: 0px 40px;
				background-color: #0c548b;

				p {
					color: #fff;
					font-weight: bold;
					border-radius: 20px;
					margin-bottom: 30px;
				}
				span {
					position: absolute;
					top: 50px;
					right: 0px;
					padding: 10px;
					font-size: 34px;
					color: #fff;
					font-weight: bold;
				}
			}
			.clockin {
				width: 1px;
				flex-grow: 3;
				background: url(../../assets/images/index-card-sum.png) no-repeat;
				background-size: 40%;
				background-position: 20px 30px;
				background-color: #62ace4;
				border-radius: 20px;
				padding: 10px;
				position: relative;
				p {
					color: #fff;
					font-weight: bold;
					border-radius: 20px;
					position: absolute;
				}
				button {
					position: absolute;
					top: 60px;
					right: 20px;
					width: 100px;
					height: 40px;
					border-radius: 20px;
					font-size: 18px;
					font-weight: bold;
					background-color: #b0f3cc;
					color: #106ab9;
				}
			}
		}
		.second-row {
			display: flex;
			justify-content: space-around;
			height: 120px;
			.sports-data {
				width: 1px;
				flex-grow: 3;
				margin-right: 15px;
				background: url(../../assets/images/login3.png) no-repeat center
					center/cover;
				background-size: cover;
				border-radius: 20px;
				// padding: 10px;
				a {
					display: block;
					width: 100px;
					line-height: 40px;
					border-radius: 20px;
					background: rgba(225, 225, 225, 0.5);
					color: #fff;
					font-weight: bold;
					text-align: center;
				}
			}
			.sports-badge {
				width: 1px;
				flex-grow: 2;
				background: url(../../assets/images/index-card-badge.png) no-repeat;
				background-size: 60%;
				background-position: 10px 30px;
				background-color: #94dfeb;
				border-radius: 20px;
				padding: 10px;
				position: relative;
				p {
					font-weight: bold;
					color: #fff;
					margin-bottom: 40px;
				}
				span {
					position: absolute;
					top: 50px;
					right: 20px;
					font-size: 34px;
					color: #fff;
					font-weight: bold;
					margin-left: 70px;
				}
			}
		}
		.third-row {
			height: 120px;
			background: url(../../assets/images/swiper3.jpg) no-repeat center
				center/cover;
			border-radius: 20px;
			a {
				display: block;
				width: 100px;
				line-height: 40px;
				border-radius: 20px;
				background: rgba(225, 225, 225, 0.5);
				color: #0f0a0c;
				font-weight: bold;
				text-align: center;
			}
		}
		.fourth-row {
			height: 120px;
			background: url(../../assets/images/ad.jpg) no-repeat center center/cover;
			border-radius: 20px;
			a {
				display: block;
				width: 100px;
				line-height: 40px;
				border-radius: 20px;
				background: rgba(225, 225, 225, 0.5);
				color: #fff;
				font-weight: bold;
				text-align: center;
			}
		}

		//轮播图交互
		.swiper {
			width: 100%;
			height: 180px;
			background-color: #ccc;
			.swiper1 {
				background: url(../../assets/images/swiper1.webp) no-repeat center top;
				background-size: cover;
			}
			.swiper2 {
				background: url(../../assets/images/swiper4.webp) no-repeat center top;
				background-size: cover;
			}
			.swiper3 {
				background: url(../../assets/images/index1-5.png) no-repeat center top;
				background-size: cover;
			}
		}
	}
}
